{% extends "OspHomeBundle::layout.html.twig" %}

{% block OspHome_body %}
	<h3>Votre panier</h3>
	<hr>
	<form method="post">
	<ul class="nav nav-pills nav-stacked">
		<table id="dataTable" class="table table-striped">
			<thead>
				<tr>
					<th>Photo</th>
					<th>Catégorie</th>
					<th>Libellé</th>
					<th>Poids</th>
					<th>Prix</th>
					<th>Quantité</th>
				</tr>
			</thead>
			
			<tbody>
				{% for product in products %}
				<tr>
					<td><img src="{{asset('img/')}}{{ product.photo }}" alt={{product.photo}} height="120" width="120" /></td>
					<td>{{product.categorie.libelle}}</td>
					<td>{{product.libelle}}</td>
					<td>{{product.poids ~ ' kg'}}</td>
					<td>{{product.prix ~ ' €'}}</td>
					<td><input type="number" id={{product.id ~ "_quantite"}} name={{product.id ~ "_quantite"}} required="required" value="1" min="1" class="input-small" onchange="updateTable()"/></td>
					<td>

						<a href="{{ path('osp_home_deleteProductFromKart', {'id' : product.id}) }}" onclick="return confirm('Êtes-vous sûr ?')">
							<img src="{{ asset('img/delete.png') }}" alt="Supprimer" height="27" width="27" />
						</a>
					</td>
				</tr>	
				{% endfor %}
			</tbody>
		</table>

		{%if error%}
		<p>{{error}}</p>
		{%endif%}

		</br>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Montant</th>
					<td id="montant">{{ prix ~ ' €'}}</td>
				</tr>
				<tr>
					<th>Frais de Port</th>
					<td id="fraisPort">{{ fraisPort ~ ' €'}}</td>
				</tr>
				<tr>
					<th>Total</th>
					<td id="total"><trong>{{ total ~ ' €'}}</strong></td>
				</tr>
			</thead>
		</table>
		
		{% if app.user %}

			{% if error is null %}
					</br>
					<input type="submit" class="btn btn-primary" value="Commander" style="margin-left:80%" />
				
			{% endif %}
			</form>

		{% else %}
			<p>Vous devez vous identifier pour commander !</p>
		{% endif %}	

		<script  language="JavaScript">

			function updateTable()
			{
				var montant = 0;
				var fraisDePort = 0;

				var rows = document.getElementById("dataTable").rows;

				for (var i=1; i<rows.length; i++) 
				{

					montant += parseFloat(rows[i].cells[4].innerHTML)*parseInt(rows[i].cells[5].children[0].value);
					fraisDePort += (parseFloat(rows[i].cells[3].innerHTML)*0.10)*parseInt(rows[i].cells[5].children[0].value);
				}

				var total = montant + fraisDePort;

				document.getElementById("montant").innerHTML = montant + " €";
				document.getElementById("fraisPort").innerHTML = fraisDePort + " €";
				document.getElementById("total").innerHTML = total + " €";
			}

			updateTable();
			

		</script>



{% endblock %}